import React, { Component } from 'react'
import {Col, Row } from 'antd'
import TaskMenu from './task-menu-box'
import TaskContent from './task-content'
import * as taskActions from '../../../../actions/task'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'

class TaskView extends Component {
  constructor () {
    super()
    this.state = {
      taskId: -1,
    }
  }

  componentDidMount () {
    const topicsTasks = this.props.topicsTasks
    const taskId = topicsTasks[0].all[0].id
    this.setState({ taskId })
    this.props.getTaskInfo(taskId)
  }
  getAssignments = () => {
    const { taskId } = this.state
    if (taskId === -1) {
      return []
    }
    const { topicsTasks } = this.props
    let assignments = [];
    topicsTasks.forEach(topicsTask => {
      topicsTask.all.forEach(task => {
          if (task.id === taskId) {
            assignments = task.assignments
          }
        }
      )
    })
    return assignments
  }

  handleClick (taskId) {
    this.props.getTaskInfo(taskId)
    this.setState({ taskId })
  }

  render () {
    return <Row>
      <Col span={5}>
        <TaskMenu
          topicsTasks={this.props.topicsTasks}
          handleClick={this.handleClick.bind(this)}/>
      </Col>
      <Col span={19}>
        <TaskContent
          taskInfo={this.props.taskInfo}
          assignments={this.getAssignments()}/>
      </Col>
    </Row>
  }
}

const mapStateToProps = ({ taskInfo }) => ({ taskInfo })
const mapDispatchToProps = dispatch => ({
  getTaskInfo: (taskId) => dispatch(taskActions.getTaskInfo(taskId))
})
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(TaskView))
